<template>
    <view class="list-item">
        <view class="i-head">
            <view class="name">
                <image src="/static/img/erp/icon_kh.png" class="icon"></image>
                <view class="txt">{{ item.BName }}</view>
            </view>
            <view class="sum">
                <text>往来余额：</text>
                <!-- {{item.Total}} -->
                <!-- 应收 - 应付 - 预收 + 预付 -->
                <view class="num" :class="{ on: item.ArTotal - item.ApTotal - item.YsTotal + item.YpTotal >= 0 }"
                    >¥{{ item.ArTotal - item.ApTotal - item.YsTotal + item.YpTotal }}</view
                >
            </view>
        </view>
        <view class="i-con">
            <view class="i-c-item" @tap="toDetail(1, item)">
                <view class="num">{{ item.ArTotal }}</view>
                <view class="unit">应收(元)</view>
                <view class="line"></view>
            </view>
            <view class="i-c-item" @tap="toDetail(2, item)">
                <view class="num">{{ item.ApTotal }}</view>
                <view class="unit">应付(元)</view>
                <view class="line"></view>
            </view>
            <view class="i-c-item">
                <view class="num">{{ item.YsTotal }}</view>
                <view class="unit">预收(元)</view>
                <view class="line"></view>
            </view>
            <view class="i-c-item">
                <view class="num">{{ item.YpTotal }}</view>
                <view class="unit">预付(元)</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    components: {},
    props: {
        item: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {}
    },
    mounted() {},
    onShow() {},
    methods: {
        toDetail(type, item) {
            this.easyGoTo(
                "/pages_erpA8/account/detail?type=" + type + "&data=" + encodeURIComponent(JSON.stringify(item)),
            )
        },
    },
}
</script>

<style lang="scss">
.list-item {
    background: $color-white;
    padding: 28rpx 16rpx;
    margin-bottom: 24rpx;
    border-radius: 12px;
    .i-head {
        display: flex;
        justify-content: space-between;
        margin-bottom: 40rpx;
        align-items: center;
        .name {
            display: flex;
            flex: 1;
            word-break: break-all;
            padding-right: 24rpx;
            font-size: $size-28;
            font-weight: bold;
            .txt {
                flex: 1;
            }
            .icon {
                display: inline-flex;
                width: 20px;
                height: 20px;
                margin-right: 4rpx;
            }
        }
        .sum {
            display: flex;
            align-items: center;
            max-width: 340rpx;
            font-size: $size-36;
            font-weight: bold;
            color: $color-main;
            .num {
                flex: 1;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                &.on {
                    color: #333;
                }
            }
            text {
                font-size: $size-28;
                font-weight: normal;
                color: #333333;
            }
        }
    }
    .i-con {
        display: flex;
        align-items: center;
        .i-c-item {
            box-sizing: border-box;
            position: relative;
            display: flex;
            width: 25%;
            padding: 0 8rpx;
            flex-flow: column;
            align-items: center;
            .num {
                font-size: $size-28;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }
            .unit {
                font-size: $size-22;
                color: $color-gray-3;
            }
            .line {
                position: absolute;
                top: 16rpx;
                right: 0;
                width: 1px;
                height: 48rpx;
                background: #ebebeb;
            }
        }
    }
}
.c-yellow {
    color: $color-yellow-1;
}
</style>
